<!-- start: TOP NAVBAR -->
<div class="top_nav">
    <div class="right_top_nav">
        <ul>
            <li>
                <a href="#/app/modifyPasswd"><span class="glyphicon glyphicon-lock"></span></a>
            </li>
            <li>
                <a ng-click="loginOut()"><span class="glyphicon glyphicon-off"></span></a>
            </li>
        </ul>
        <p class="user">
            <img src="assets/images/pngs/header.png" class="img-circle header">
            <span ng-bind="user.name"></span>
        </p>
    </div>
    <ul class="left_top_nav">
        <li>
            <span class="glyphicon glyphicon-map-marker"></span> 
            <a style="width: 154px;display: inline-flex;overflow: hidden;height: 20px;color: rgb( 127, 127, 127);cursor: default;" ng-bind="loc" title="{{loc}}"></a>
        </li>
        <li>
            <span class="glyphicon glyphicon-time"></span>
            <span ng-bind="timeTip"></span>
        </li>
    </ul>
</div>
<style type="text/css">
.top_nav {
    font-size: 16px;
    font-family: "PingFangSC";
    color: rgb( 127, 127, 127);
}

.top_nav ul {
    margin-top: 18px;
    margin-bottom: 18px;
}

.top_nav li {
    float: left;
    list-style: none;
    height: 24px;
}

.top_nav .left_top_nav {
    float: left;
    padding-left: 0;
}

.top_nav .left_top_nav li {
    padding: 0 20px;
    border-left: 1px solid #e0e0e0;
}

.top_nav .left_top_nav li:first-child {
    padding-left: 0;
    border-left-width: 0;
}

.top_nav .right_top_nav {
    float: right;
}

.top_nav .right_top_nav ul {
    float: left;
}

.top_nav .right_top_nav li {
    padding: 0 15px;
}
.top_nav .right_top_nav a {
    color: #7f7f7f;
}
.top_nav .right_top_nav li:last-child {
    padding-right: 20px;
    border-right: 1px solid #e0e0e0;
}
.top_nav .user {
    float: left;
    margin-top: 11px;
    line-height: 35px;
    padding-left: 20px;
}

.top_nav .header {
    height: 35px;
    width: 35px;
}
</style>
